<template>
  <div>
      <van-nav-bar title="评论" fixed left-arrow @click-left="$router.back()"/>
      <div class="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="(obj,index) in list" :key="index">
      <template>
          
          <div class="wrap">
              <div class="img_wrap">
                  <img :src="obj.user.avatarUrl" alt="">
              </div>
              <div class="content_wrap">
                  <div class="header_wrap">
                      <div class="info_wrap">
                          <p>{{obj.user.nickname}}</p>
                          <p>{{obj.time}}</p>
                      </div>
                      <div>{{obj.likedCount}}点赞</div>
                  </div>
                  <div class="footer_wrap">{{obj.content}}</div>
              </div>
          </div>
          
      </template>
      </van-cell>
      </van-list>
      </van-pull-refresh>
      </div>
  </div>
</template>

<script>
import {getComment} from '@/api'
export default {
    data(){
        return{
            list:[],
            isLoading:false,
            loading:false,
            finished:false,
            page:1
        }
    },
    methods:{
        async onLoad(){
            this.getList();
            this.page++
        },
        async onRefresh(){
            this.list=[]
            this.page=1
            this.getList();
        },
        async getList(){
            (await getComment({
                id:this.$route.query.id,
                limit:20,
                offset:(this.page-1)*20})
            ).data.comments.forEach(element=>{this.list.push(element)})
            this.isLoading=false
            this.loading=false
        }
    },
    
}
</script>

<style>
.main{
    padding-top: 46px;
}

.wrap{
    display: flex;
}
.img_wrap img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.img_wrap{
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.266667rem;

}

.content_wrap{
    flex: 1;
}

.header_wrap{
    display: flex;
}

.info_wrap{
    flex: 1;
}
.info_wrap p:first-child{
    font-size: 0.373333rem;
    color: #666;
}
.header_wrap div:last-of-type{
    color: #999;
    font-size: 0.293333rem;
}
.info_wrap p:last-of-type{
    font-size: 0.24rem;
    color: #999;
}
.footer_wrap{
    font-size: 0.4rem;
    color: #333;
}
</style>